import { useEffect, useState } from "react";
import { Tree } from "antd"
import { remoteList } from "@/api/system/menu";
import { deepClone } from "@/utils";

const AuthMenuTree = (props: any) => {
    let { ids = [] } = props;
    const fieldNames = {
        children: 'children',
        title: 'name',
        key: 'id'
    }
    const [treeData, setTreeData] = useState<Array<any>>([])
    const [checkedKeys, setCheckedKeys] = useState<Array<any>>([]);
    const [_allKeys, setAllKeys] = useState<Array<any>>()

    useEffect(() => {
        showRoutes(ids);
    }, [ids])

    //选择项
    const onCheckSelect = (selectedKeys: any, info: { halfCheckedKeys?: any; }): void => {
        let allKeys = [...selectedKeys, ...info.halfCheckedKeys];
        setAllKeys(allKeys);
        setCheckedKeys(selectedKeys)
        props.select(allKeys);
    }
    //显示选中路由菜单
    const showRoutes = async (menus: Array<any>) => {
        let data = await getMenus();
        if (!menus?.length) return [];
        let routes = dealRoutes(menus, data);
        setCheckedKeys(routes);
    }
    //处理父层级 选中 子层级为全选
    const dealRoutes = (routes: Array<any>, treeData: Array<any>) => {
        if (!treeData.length) return [];
        dealMenuChecked(treeData, routes)
        let res = dealChecked(treeData, routes)
        return res
    }
    const dealMenuChecked = (treeData: Array<any>, routes: Array<any>) => {
        if (treeData?.length) {
            treeData.map((item: any) => {
                item.childNum = 0;
                if (item.children?.length) {
                    item.children.map((child: { id: any; }) => {
                        if (routes.indexOf(child.id) != -1) {
                            item.childNum += 1
                        }
                    })
                    item.children = dealMenuChecked(item.children, routes)
                } else {
                    if (routes.indexOf(item.id) != -1) {
                        item.childNum += 1
                    }
                }
            })
        }
        return treeData;
    }
    const dealChecked = (treeData: any[], menus: any[]) => {
        let menusArray = deepClone(menus);
        if (treeData?.length) {
            treeData.map(item => {
                if (item.children?.length) {
                    menusArray = menusArray.filter((route: any) => route != item.id)
                    menusArray = dealChecked(item.children, menusArray)
                }
            })
        }
        return menusArray
    }
    //获取菜单列表
    const getMenus = async () => {
        try {
            let res = await remoteList({});
            let { data } = res;
            setTreeData(data)
            return data
        } finally {
        }
    }

    return (
        <Tree
            checkable
            fieldNames={fieldNames}
            treeData={treeData}
            defaultExpandParent
            checkedKeys={checkedKeys}
            onCheck={onCheckSelect}
        />
    )
}

export default AuthMenuTree